<template>
	
	<div class="yxdxz">
	<div class="top">
		<h1 class="yuanxiaoku">院校库</h1>
	<hr style="color: #00FF00"/></div>
	<div class="xz">
		<h4 class="yuanxiaocx">按院校查询</h4>
		<hr />
		<el-input v-model="input" placeholder="请输入内容" class="search"></el-input>
		<el-button>搜索</el-button>
		<p class="annotation">（ 注：本名单未包含港澳台地区高等学校 ）</p>
		<li class="yxk-option-con clearfix">
	                  <div class="list-th">院校所在地</div>
	                  <div class="list-td clearfix">
	                     
	                      <span class="yxk-option js-option selected" data-id="">全部</span>
	                      
	                          <span class="yxk-option js-option " data-id="11">北京</span>
	                      
	                          <span class="yxk-option js-option " data-id="12">天津</span>
	                      
	                          <span class="yxk-option js-option " data-id="13">河北</span>
	                      
	                          <span class="yxk-option js-option " data-id="14">山西</span>
	                      
	                          <span class="yxk-option js-option " data-id="15">内蒙古</span>
	                      
	                          <span class="yxk-option js-option " data-id="21">辽宁</span>
	                      
	                          <span class="yxk-option js-option " data-id="22">吉林</span>
	                      
	                          <span class="yxk-option js-option " data-id="23">黑龙江</span>
	                      
	                          <span class="yxk-option js-option " data-id="31">上海</span>
	                      
	                          <span class="yxk-option js-option " data-id="32">江苏</span>
	                      
	                          <span class="yxk-option js-option " data-id="33">浙江</span>
	                      
	                          <span class="yxk-option js-option " data-id="34">安徽</span>
	                      
	                          <span class="yxk-option js-option " data-id="35">福建</span>
	                      
	                          <span class="yxk-option js-option " data-id="36">江西</span>
	                      
	                          <span class="yxk-option js-option " data-id="37">山东</span>
	                      
	                          <span class="yxk-option js-option " data-id="41">河南</span>
	                      
	                          <span class="yxk-option js-option " data-id="42">湖北</span>
	                      
	                          <span class="yxk-option js-option " data-id="43">湖南</span>
	                      
	                          <span class="yxk-option js-option " data-id="44">广东</span>
	                      
	                          <span class="yxk-option js-option " data-id="45">广西</span>
	                      
	                          <span class="yxk-option js-option " data-id="46">海南</span>
	                      
	                          <span class="yxk-option js-option " data-id="50">重庆</span>
	                      
	                          <span class="yxk-option js-option " data-id="51">四川</span>
	                      
	                          <span class="yxk-option js-option " data-id="52">贵州</span>
	                      
	                          <span class="yxk-option js-option " data-id="53">云南</span>
	                      
	                          <span class="yxk-option js-option " data-id="54">西藏</span>
	                      
	                          <span class="yxk-option js-option " data-id="61">陕西</span>
	                      
	                          <span class="yxk-option js-option " data-id="62">甘肃</span>
	                      
	                          <span class="yxk-option js-option " data-id="63">青海</span>
	                      
	                          <span class="yxk-option js-option " data-id="64">宁夏</span>
	                      
	                          <span class="yxk-option js-option " data-id="65">新疆</span>
	                      
	                  </div>
	              </li>
		<li class="yxk-option-con clearfix">
		                <div class="list-th">主管部门类别</div>
		                <div class="list-td clearfix">
		                    
		                    <span class="yxk-option js-option js-ls selected" data-id="">全部</span>
		                    <span class="yxk-option js-option " data-id="moe">教育部</span>
		                    <span class="yxk-option js-option " data-id="min">其他部委</span>
		                    <span class="yxk-option js-option " data-id="loc">地方</span>
		                    <span class="yxk-option js-option " data-id="army">军校</span>
		                </div>
		            </li>		  
		<!-- <li class="yxk-option-con clearfix">
	                  <div class="list-th">院校类型</div>
	                  <div class="list-td clearfix">
	                      
	                      
	                      <span class="yxk-option js-option js-ls selected" data-id="">全部</span>
	                      <span class="yxk-option js-option " data-id="01">综合</span>
	                      <span class="yxk-option js-option " data-id="02">工科</span>
	                      <span class="yxk-option js-option " data-id="03">农业</span>
	                      <span class="yxk-option js-option " data-id="04">林业</span>
	                      <span class="yxk-option js-option " data-id="05">医药</span>
	                      <span class="yxk-option js-option " data-id="06">师范</span>
	                      <span class="yxk-option js-option " data-id="07">语言</span>
	                      <span class="yxk-option js-option " data-id="08">财经</span>
	                      <span class="yxk-option js-option " data-id="09">政法</span>
	                      <span class="yxk-option js-option " data-id="10">体育</span>
	                      <span class="yxk-option js-option " data-id="11">艺术</span>
	                      <span class="yxk-option js-option " data-id="12">民族</span>
	                  </div>
	              </li> -->
		<li class="yxk-option-con clearfix">
		                <div class="list-th">学历层次</div>
		                <div class="list-td clearfix">
		                    
		                    <span class="yxk-option js-option js-ls selected" data-id="">全部</span>
		                    <span class="yxk-option js-option " data-id="bk">本科</span>
		                    <span class="yxk-option js-option " data-id="gzzk">专科</span>
		                </div>
		            </li>
					
					
		<li class="yxk-xz clearfix">
		                <div class="list-th">院校特性</div>
		                <div class="list-td">
		                    <label class="ch-check-label-1 "><!--修改了一下class，有需要再改回来  ch-check-label-->
								<input type="checkbox" name="zgsx" id="ylxx" value="ylxx">
								一流大学建设高校
		                    </label>
		                    <label class="ch-check-label ">
								<input type="checkbox" name="zgsx" id="ylxx" value="ylxx">
		                        一流学科建设高校
		                    </label>
		
		                    <label class="ch-check-label ">
								<input type="checkbox" name="zgsx" id="yjsy" value="yjsy">
		                        研究生院
		                    </label>
		                   <a href="//yz.chsi.com.cn/kyzx/kp/201101/20110119/161300374.html" target="_blank"><i class="iconfont" title="研究生院"></i></a>
		                    <label class="ch-check-label ">
								<input type="radio" name="yxjbz" id="yxjbz" value="2">
		                        民办高校
		                    </label>
		                    <a href="//gaokao.chsi.com.cn/gkxx/gkcs/201712/20171212/1644084026.html" target="_blank"><i class="iconfont" title="民办高校"></i></a>
		                    <label class="ch-check-label ">
								<input type="radio" name="yxjbz" id="yxjbz" value="3">
		                       独立学院
		                    </label>
		                    <a href="//gaokao.chsi.com.cn/gkxx/zcdh/200803/20080307/3975622.html" target="_blank"><i class="iconfont" title="独立学院"></i></a>
		                    <label class="ch-check-label ">
								<input type="radio" name="yxjbz" id="yxjbz" value="4">
		                        中外合作办学
		                    </label>
		                   
		                </div>
		            </li>
				  <hr />
				  
	 </div>
	 
	 <!-- ======================================================================== -->
	<div class="yx">
		<el-table
		      :data="tableData"
		      style="width: 100%">
			  <el-table-column
			     prop="universityid"
			     label="序号"
			     width="180">
			  </el-table-column>
		      <el-table-column
		        prop="universityname"
		        label="院校名称"
		        width="180">
			 </el-table-column>
			 <el-table-column
		        prop="universitycode"
		        label="院校编码"
		        width="180">
		      </el-table-column>
			 <el-table-column
			    prop="universitybelong"
			    label="主管部门类型"
			    width="180">
			 </el-table-column>
		      <el-table-column
			    prop="universitycity"
			    label="院校所在地"
			    width="180">
			 </el-table-column>
			  <el-table-column
			    prop="universitylevel"
			    label="学历层次"
			    width="180">
			  </el-table-column>
			  <el-table-column
			    prop="universitytype"
			    label="院校特性"
			    width="180">
			  </el-table-column>
			
		    </el-table>
	</div>
	
	</div>
</template>
	
<script>
	// import Mock from '../mock/yxxz.js'
	export default {
	      data() {
	        return {
	          tableData: [],
			  input:''
	        }
	      },
		  mounted() {
		  	this.getList();
		  },
		  methods:{
			  getList(){
				  this.$httpApi.get('http://localhost:8084/university')
				  	.then(res => {
				  		this.tableData = res.data;
						// console.log(res.data);
				  	})
			  }
		  }
	    }
</script>

<style>
	
	.yxk-option-con{
		
		list-style: none;
		line-height: 30px;
		zoom: 1;
		position: relative;
		
		
		width: 1300px;
		padding-left: 0;
		overflow: hidden;
	}
	.list-th{
		float: left;
		width: 120px;
	}
	.list-td{
		font: 16px/1.8 "Microsoft YaHei","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
		color: #666;
		
	}
	
	.yxdxz{
		margin: 0 auto;
		width: 1500px;
	}
	.yuanxiaoku{
		margin-left: 100px;
		color: skyblue;
	}
	.yuanxiaocx{
		color: skyblue;
	}
	.annotation{
		font: 14px/1.8 "Microsoft YaHei","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
		color: #666;
	}
	.search{
		width: 200px;
		
	}
	.yxk-xz{
		list-style: none;
		
		
	}
	.xz{
		list-style: none;
		margin: 0 auto;
		width: 1300px;
	}
	.yx{
		width: 1300px;
		
		
			margin:auto ;
		
	}
	.js-option{
		margin: 0 15px 0 0;
	}
	.ch-check-label{
		margin: 0 0 0 15px;
	}
	.iconfont{
		            font: 14px/1.8 "Microsoft YaHei","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
		            list-style: none;
		            line-height: 30px;
		            color: #999;
		            font-family: "iconfont" !important;
		            
		            font-style: normal;
		            -webkit-font-smoothing: antialiased;
	}
	.yxk-option-con{
		margin: 0 0 10px 0;
	}
	/* ======================= */
	 
</style>
